<template>
    <div class="control-panel">
        <div v-for="control in controlList" :key="control.type" class="control-node" @click="handleClick(control)">
            <svg-icon :name="control.icon" width="20" height="20" color="var(--el-text-color-primary)"/>
            <span style="margin-top: 5px; user-select: none;">{{ control.label }}</span>
        </div>
    </div>
</template>
  
<script setup lang="ts">
const $emit = defineEmits(['handControl']);
const handleClick = (control: controlType) => {
    $emit('handControl', control);
};

export interface controlType {
    type: string;
    label: string;
    icon: string;
}

const controlList = ref<controlType[]>([
  { type: 'zoomOut', label: '缩小' ,icon: 'bpm-zoomOut' },
  { type: 'zoomIn', label: '放大' ,icon: 'bpm-zoomIn' },
  { type: 'fitScreen', label: '适应' ,icon: 'bpm-fitScreen' },
  { type: 'undo', label: '上一步' ,icon: 'bpm-undo'},
  { type: 'redo', label: '下一步' ,icon: 'bpm-redo'}
]);
</script>
  
<style scoped lang="scss">
.control-panel {
    background: hsla(0, 0%, 100%, .8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    display: flex;
    padding: 5px;
    border-radius: 8px;
    background-color: var(--el-fill-color-overlay);
    border: 0.5px solid var(--el-border-color-lighter);
    position: absolute;
    right: 10px;
    top: 10px;
}
.control-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    border-radius: 8px;
    width: 60px;
    cursor: pointer;
    color:var(--el-text-color-regular);
    font-size: 13px;
}
.control-node:hover{
    background-color: var(--el-fill-color-dark);
}
</style>